<nz-card>
  <!-- S 基础信息 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      基础信息
    </p>
    
    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动类型</nz-form-label>
        <nz-form-control nzFlex="1">
          <nz-radio-group
            [(ngModel)]="formParams.type"
            [nzDisabled]="[1, 2].includes(formParams.status) && routeParams.type == 1"
            (ngModelChange)="couponTypeChange($event)">
            <label nz-radio [nzValue]="1">满减</label>
            <label nz-radio [nzValue]="2">满折</label>
            <label nz-radio [nzValue]="3">多件折扣</label>
            <label nz-radio [nzValue]="4">多件立减</label>
            <label nz-radio [nzValue]="5">阶梯满减</label>
            <label nz-radio [nzValue]="6">阶梯折扣</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动名称</nz-form-label>
        <nz-form-control nzFlex="400px">
          <input nz-input maxlength="10" placeholder="请输入,仅内部可见" [(ngModel)]="formParams.name" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动标题</nz-form-label>
        <nz-form-control nzFlex="400px">
          <input nz-input maxlength="20" placeholder="请输入,用户前端可见" [(ngModel)]="formParams.showCopy" />
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">备注</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-textarea-count [nzMaxCharacterCount]="100">
            <textarea
              rows="4"
              nz-input
              maxlength="100"
              placeholder="仅内部可见"
              [(ngModel)]="formParams.remark"
            ></textarea>
          </nz-textarea-count>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item *ngIf="[1, 2].includes(formParams.type)">
        <nz-form-label nzFlex="120px" nzRequired>优惠门槛</nz-form-label>
        <nz-form-control>
          <div class="form-item-flex">
            <span class="p-r-6">订单满</span>

            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="100000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.orderLimitMoney"
              (nzBlur)="discountLimitChange(0)"
            ></nz-input-number>

            <span class="p-l-6">元可用</span>
          </div>
        </nz-form-control>
      </nz-form-item>

      <!-- Type 满减 -->
      <ng-container *ngIf="formParams.type === 1">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>减免额度</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="10000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitSmall"
              (nzBlur)="discountLimitChange(1)"
            ></nz-input-number>
            元
          </nz-form-control>
        </nz-form-item>
  
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>倍数减免</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-radio-group [(ngModel)]="formParams.overlayFlag">
              <label nz-radio nzValue="0">否</label>
              <label nz-radio nzValue="1">是</label>
            </nz-radio-group>
  
            <i
              nz-icon
              nzType="exclamation-circle"
              nzTheme="outline"
              class="m-l-10"
              nz-tooltip
              nzTooltipTitle="例如满300减30，满600减60"
            ></i>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- Type 折扣 -->
      <ng-container *ngIf="formParams.type == 2">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>折扣力度</nz-form-label>
          <nz-form-control nzFlex="500px">
            <span class="p-r-6">打</span>

            <nz-input-number
              style="width: 120px;"
              [nzMin]="0.1"
              [nzMax]="9.9"
              [nzPrecision]="1"
              [nzStep]="0.1"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitSmall"
            ></nz-input-number>

            <span class="p-l-6">折</span>
          </nz-form-control>
        </nz-form-item>

        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>最高减免金额</nz-form-label>
          <nz-form-control nzFlex="500px">
            <nz-input-number
              style="width: 120px;"
              [nzMin]="1"
              [nzMax]="100000"
              [nzStep]="1"
              [nzPrecision]="0"
              nzPlaceHolder="请输入"
              [(ngModel)]="formParams.limitBig"
            ></nz-input-number>
            <span class="p-l-6">元</span>
          </nz-form-control>
        </nz-form-item>
      </ng-container>

      <!-- Type 多件折扣 | 多件立减 | 阶梯折扣 | 阶梯满减 -->
      <ng-container *ngIf="[3, 4, 5, 6].includes(formParams.type)">
        <nz-form-item>
          <nz-form-label nzFlex="120px" nzRequired>优惠内容</nz-form-label>
          <nz-form-control nz-col nzFlex="500px">
            <nz-table
              #editRowTable
              nzBordered
              nzSize="small"
              [nzShowPagination]="false"
              [nzFooter]="discountTable?.length < 5 ? editTableFoot : null"
              [nzData]="discountTable">
              <thead>
                <tr>
                  <th nzAlign="center">{{[3, 4].includes(formParams.type) ? '>=件数' : '>=金额'}}</th>
                  <!-- 多件折扣3 or 阶梯折扣6 -->
                  <ng-container *ngIf="[3, 6].includes(formParams.type)">
                    <th nzAlign="center">折扣率</th>
                    <th nzAlign="center">最多减免</th>
                  </ng-container>
                  <!-- 多件立减4 or 阶梯满减5 -->
                  <ng-container *ngIf="[4, 5].includes(formParams.type)">
                    <th nzAlign="center">减免</th>
                  </ng-container>
                  <th nzAlign="center">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let data of editRowTable.data; let index = index;">
                  <td nzAlign="center">
                    <ng-container *ngIf="[3, 4].includes(formParams.type); else elsedylTemplate">
                      <!-- 件数 -->
                      <nz-input-number
                        [nzMin]="limitMinInput(index)"
                        [nzMax]="limitMaxInput(index)"
                        [nzStep]="1"
                        [nzPrecision]="0"
                        [(ngModel)]="data.number"
                      ></nz-input-number>
                    </ng-container>
                    <ng-template #elsedylTemplate>
                      <!-- 金额 -->
                      <nz-input-number
                        [nzMin]="limitMinInput(index)"
                        [nzMax]="limitMaxInput(index)"
                        [nzStep]="1"
                        [nzPrecision]="0"
                        [(ngModel)]="data.orderLimitMoney"
                      ></nz-input-number>
                    </ng-template>
                  </td>
                  <!-- 多件折扣3 or 阶梯折扣6 -->
                  <ng-container *ngIf="[3, 6].includes(formParams.type)">
                    <td nzAlign="center">
                      <nz-input-number
                        [nzMin]="0.1"
                        [nzMax]="9.9"
                        [nzStep]="1"
                        [nzPrecision]="1"
                        [(ngModel)]="data.discountRate"
                      ></nz-input-number>
                    </td>
                    <td nzAlign="center">
                      <nz-input-number
                        [nzMin]="1"
                        [nzMax]="100000"
                        [nzStep]="1"
                        [nzPrecision]="0"
                        [(ngModel)]="data.maxReduction"
                      ></nz-input-number>
                    </td>
                  </ng-container>
                  <!-- 多件立减4 or 阶梯满减5 -->
                  <ng-container *ngIf="[4, 5].includes(formParams.type)">
                    <td nzAlign="center">
                      <nz-input-number
                        [nzMin]="1"
                        [nzMax]="10000"
                        [nzPrecision]="0"
                        [nzStep]="1"
                        [(ngModel)]="data.reduction"
                      ></nz-input-number>
                    </td>
                  </ng-container>
                  <td nzAlign="center">
                    <a nz-button nzType="link" nzDanger (click)="deleteDiscountItem(index)">删除</a>
                  </td>
                </tr>
              </tbody>
              <ng-template #editTableFoot>
                <div nz-row nzJustify="center">
                  <button nz-button nzType="link" (click)="addDiscountItem()">
                    <i nz-icon nzType="plus" nzTheme="outline"></i>
                    添加
                  </button>
                </div>
              </ng-template>
            </nz-table>
          </nz-form-control>
        </nz-form-item>
      </ng-container>
    </div>
  </div>
  <!-- E 基础信息 -->

  <nz-divider></nz-divider>

  <!-- S 范围设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      范围设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>参与人限制</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group [(ngModel)]="formParams.userType">
            <label nz-radio [nzValue]="0">不限制</label>
            <label nz-radio [nzValue]="1">C端用户</label>
            <label nz-radio [nzValue]="2">B端用户</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>活动生效时间</nz-form-label>
        <nz-form-control nzFlex="500px">
          <nz-range-picker
            [nzShowTime]="true"
            [nzShowTime]="{ nzFormat: 'HH:mm:ss' }"
            nzFormat="yyyy-MM-dd HH:mm:ss"
            [(ngModel)]="takeEffectDates"
            (ngModelChange)="onDateChange($event, ['beginTime', 'endTime'])"
          ></nz-range-picker>

          <i
            nz-icon
            nzType="exclamation-circle"
            nzTheme="outline"
            class="m-l-10"
            nz-tooltip
            nzTooltipTitle="生效时间内，前端才会展示该活动"
          ></i>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">优惠叠加</nz-form-label>
        <nz-form-control nzFlex="400px">
          <label nz-checkbox [(ngModel)]="couponOverlay">优惠券</label>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 范围设置 -->

  <nz-divider></nz-divider>

  <!-- S 皮肤设置 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      皮肤设置
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>参数配置</nz-form-label>
        <nz-form-control nzFlex="420px">
          <nz-table
            nzTemplateMode
            nzBordered
            nzSize="small"
            >
            <thead>
              <tr>
                <th nzAlign="center" nzWidth="100px"></th>
                <th nzAlign="center">竖版（手机端）</th>
                <th nzAlign="center">横版（PC端等）</th>
              </tr>
            </thead>

            <tbody>
              <tr>
                <td nzAlign="center">背景色</td>
                <td nzAlign="center">
                  <!-- WAP -->
                  <div class="flex-wrap">
                    <input nz-input [(ngModel)]="formParams.skinBgColor" />
                    <span
                      [ngStyle]="{'background': formParams.skinBgColor}"
                      class="set-bg-sp"
                    ></span>
                  </div>
                </td>
                <td nzAlign="center">
                  <!-- PC -->
                  <div class="flex-wrap">
                    <input nz-input [(ngModel)]="formParams.skinBgColorPc" />
                    <span
                      [ngStyle]="{'background': formParams.skinBgColorPc}"
                      class="set-bg-sp"
                    ></span>
                  </div>
                </td>
              </tr>
              <tr>
                <td nzAlign="center">顶图</td>
                <td nzAlign="center">
                  <!-- WAP -->
                  <div class="set-flex-img">
                    <zdy-upload
                      [(ngModel)]="formParams.skinTopImage"
                    ></zdy-upload>
                  </div>
                </td>
                <td nzAlign="center">
                  <!-- PC -->
                  <div class="set-flex-img">
                    <zdy-upload
                      [(ngModel)]="formParams.skinTopImagePc"
                    ></zdy-upload>
                  </div>
                </td>
              </tr>
            </tbody>
          </nz-table>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px" nzRequired>筛选排序</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-radio-group [(ngModel)]="formParams.isFilterSort">
            <label nz-radio [nzValue]="0">不开启</label>
            <label nz-radio [nzValue]="1">开启</label>
          </nz-radio-group>
        </nz-form-control>
      </nz-form-item>
    </div>
  </div>
  <!-- E 皮肤设置 -->

  <nz-divider></nz-divider>

  <!-- S 适用商品 -->
  <div class="form-item-wrap">
    <p class="item-title">
      <i nz-icon nzType="subnode" nzTheme="outline" class="t-icon"></i>
      适用商品
      <span class="title-tip">（默认所有商品都不可用，请在下方添加可用的内容）</span>
    </p>

    <div class="item-control">
      <nz-form-item>
        <nz-form-label nzFlex="120px">指定机型</nz-form-label>
        <nz-form-control nzFlex="400px">
          <p class="appoint-model">
            <label
              nz-radio
              [(ngModel)]="modelAll"
              (ngModelChange)="modelOwnerAllChange($event, 1)"
            >全选</label>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="modelOwnerNotAllChange(1)"
            >全不选</button>
          </p>
          <div class="p-t-6">
            已选
            <b *ngIf="modelAll;else templateAll">
              全部
            </b>
            <ng-template #templateAll>
              <b>{{ defaultModelKeys.length || 0 }}</b> 个
            </ng-template>
            内容

            <button nz-button nzType="link" (click)="selectMoreModel()">选择更多</button>

            <!-- select-tree -->
            <model-select-tree
              [(ngModel)]="isModelVisible"
              [defaultKeys]="defaultModelKeys"
              (onSubmit)="subModelTree($event)"
            ></model-select-tree>
          </div>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">货主</nz-form-label>
        <nz-form-control nzFlex="400px">
          <p class="p-b-10">
            <label
              nz-radio
              [(ngModel)]="supplierAll"
              (ngModelChange)="modelOwnerAllChange($event, 2)"
            >全选</label>

            <button
              nz-button
              nzType="link"
              nzSize="small"
              nzDanger
              (click)="modelOwnerNotAllChange(2)"
            >全不选</button>
          </p>

          <nz-select
            nzShowSearch
            nzAllowClear
            [nzMaxTagCount]="1"
            nzMode="multiple"
            nzPlaceHolder="请选择货主"
            [(ngModel)]="supplierSelected"
            (ngModelChange)="supplierChange($event)"
          >
            <nz-option
              *ngFor="let option of supplierOptions"
              [nzLabel]="option.name"
              [nzValue]="option.id"
            ></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">指定B端成色</nz-form-label>
        <nz-form-control nzFlex="400px">
          <zdy-checkbox-group
            *ngIf="conditionOptionsB.length"
            [checkOptions]="conditionOptionsB"
            [checkKeys]="{
              key: 'id',
              label: 'name'
            }"
            [(ngModel)]="selectConditionB"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">指定C端成色</nz-form-label>
        <nz-form-control nzFlex="400px">
          <zdy-checkbox-group
            *ngIf="conditionOptionsC.length"
            [checkOptions]="conditionOptionsC"
            [checkKeys]="{
              key: 'id',
              label: 'name'
            }"
            [(ngModel)]="selectConditionC"
          ></zdy-checkbox-group>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">排除可用商品</nz-form-label>
        <nz-form-control nzFlex="400px">
          已选 <b>{{ excludeGoodsIds?.length || '0' }}</b> 个商品
          <button
            nz-button
            nzType="link"
            [disabled]="!excludeGoodsIds?.length"
            (click)="previewModal(1)"
          >点击查看</button>

          <button
            nz-button
            nzType="link"
            (click)="showSelectGoods(1)"
          >选择更多</button>

          <i
            nz-icon
            nzType="exclamation-circle"
            nzTheme="outline"
            class="m-l-10"
            nz-tooltip
            nzTooltipTitle="可以在指定机型和货主之内，去掉部分商品不参予优惠"
          ></i>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label nzFlex="120px">追加可用商品</nz-form-label>
        <nz-form-control nzFlex="400px">
          已选 <b>{{ addGoodsIds?.length || '0' }}</b> 个商品
          <button
            nz-button
            nzType="link"
            [disabled]="!addGoodsIds?.length"
            (click)="previewModal(2)"
          >点击查看</button>

          <button
            nz-button
            nzType="link"
            (click)="showSelectGoods(2)"
          >选择更多</button>

          <i
            nz-icon
            nzType="exclamation-circle"
            nzTheme="outline"
            class="m-l-10"
            nz-tooltip
            nzTooltipTitle="可以在指定机型和货主之外，再指定部分商品参予优惠"
          ></i>
        </nz-form-control>
      </nz-form-item>

      <!-- <nz-form-item>
        <nz-form-label nzFlex="120px">状态</nz-form-label>
        <nz-form-control nzFlex="400px">
          <nz-badge
            [nzStatus]="[3, 4].includes(formParams.status) ? 'error' : [2].includes(formParams.status) ? 'success' : 'default'"
            [nzText]="formParams.status | sencondCouponStatus: 'label'"
          ></nz-badge>
        </nz-form-control>
      </nz-form-item> -->
    </div>
  </div>
  <!-- E 适用商品 -->
</nz-card>

<nz-card class="m-t-4">
  <div nz-row nzJustify="center" nzAlign="top">
    <button
      *ngIf="['0', '3'].includes(routeParams.type) || formParams.status === 5"
      nz-button
      nzType="primary"
      class="m-r-10"
      (click)="subRelease()"
    >发布</button>
    
    <button
      nz-button
      nzType="default"
      class="m-r-10"
      (click)="submitForms(1)"
    >保存</button>

    <button nz-button nzType="dashed" (click)="back()">返回</button>
  </div>
</nz-card>

<!-- S 选择指定 Modal -->
<goods-select-modal
  [(ngModel)]="isGoodsVisible"
  [tickOptions]="modelGoodOptions"
  [disabledOptions]="disabledOptions"
  (subOptions)="submitSelectGoods($event)"
></goods-select-modal>
<!-- S 选择指定 Modal -->

<!-- S 已选查看 -->
<goods-preview-modal
  [(ngModel)]="isPreviewVisible"
  [tableDatas]="previewTable"
  [previewIds]="previewGoodIds"
  (dataChange)="addExcludeChange($event)"
></goods-preview-modal>
<!-- E 已选查看 -->